<!-- 团队管理组件 -->
<template>
  <view v-if="showTeamSection" class="team-management">
    <!-- 团队信息显示 -->
    <view v-if="teamInfo" class="team-info">
      <view class="team-header">
        <text class="team-title">团队信息</text>
        <view class="team-status">
          <text>{{ isTeamLeader ? '队长' : '成员' }}</text>
        </view>
      </view>
      
      <!-- 已解散团队显示 -->
      <view v-if="teamInfo.status === 2" class="dissolved-team-section">
        <view class="dissolved-info">
          <text class="dissolved-title">团队已解散</text>
          <text class="dissolved-desc">您的团队已被解散，可以重新创建团队</text>
        </view>
        <button class="recreate-team-btn" @click="$emit('recreate-team')">
          <text>重新创建团队</text>
        </button>
      </view>
      
      <!-- 正常团队显示 -->
      <view v-else class="team-details">
        <view class="team-member-count">
          <text>成员数量：{{ teamInfo.memberCount || 0 }}</text>
        </view>
        <view class="team-actions">
          <button 
            v-if="isTeamLeader" 
            class="invite-btn" 
            @click="$emit('open-invitation')"
          >
            <text>邀请成员</text>
          </button>
          <button 
            v-if="isTeamLeader" 
            class="dissolve-btn" 
            @click="$emit('dissolve-team')"
          >
            <text>解散团队</text>
          </button>
          <button 
            v-if="!isTeamLeader" 
            class="leave-btn" 
            @click="$emit('leave-team')"
          >
            <text>退出团队</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 创建团队按钮 -->
    <view v-else class="create-team-section">
      <view class="create-team-info">
        <text class="create-team-title">创建团队</text>
        <text class="create-team-desc">邀请好友一起完成任务，提高成功率</text>
      </view>
      <button class="create-team-btn" @click="$emit('create-team')">
        <text>创建团队</text>
      </button>
    </view>

    <!-- 团队邀请模态框 -->
    <TeamInvitationModal 
      v-if="showTeamInvitationModal"
      :task-id="taskId"
      :team-info="teamInfo"
      @close="showTeamInvitationModal = false"
      @invite-success="handleInviteSuccess"
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import TeamInvitationModal from './TeamInvitationModal.vue'

// Props
const props = defineProps({
  taskId: {
    type: [Number, String],
    required: true
  },
  teamInfo: {
    type: Object,
    default: null
  },
  isTeamLeader: {
    type: Boolean,
    default: false
  },
  showTeamSection: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits([
  'open-invitation',
  'dissolve-team',
  'leave-team',
  'create-team',
  'recreate-team',
  'invite-success'
])

// 响应式数据
const showTeamInvitationModal = ref(false)

// 处理邀请成功
const handleInviteSuccess = () => {
  showTeamInvitationModal.value = false
  emit('invite-success')
}
</script>

<style scoped>
.team-management {
  margin: 20rpx 0;
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.team-info {
  width: 100%;
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.team-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.team-status {
  background: #4CAF50;
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 已解散团队样式 */
.dissolved-team-section {
  background: #fff3e0;
  border: 2rpx solid #ff9800;
  border-radius: 12rpx;
  padding: 24rpx;
  text-align: center;
}

.dissolved-info {
  margin-bottom: 20rpx;
}

.dissolved-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #f57c00;
  margin-bottom: 8rpx;
}

.dissolved-desc {
  display: block;
  font-size: 28rpx;
  color: #e65100;
}

.recreate-team-btn {
  width: 100%;
  height: 80rpx;
  background: #ff9800;
  color: white;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: 600;
  border: none;
}

.team-details {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.team-member-count {
  font-size: 28rpx;
  color: #666;
}

.team-actions {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.invite-btn,
.dissolve-btn,
.leave-btn,
.create-team-btn {
  padding: 16rpx 32rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  flex: 1;
  min-width: 120rpx;
}

.invite-btn {
  background: #2196F3;
  color: white;
}

.dissolve-btn {
  background: #f44336;
  color: white;
}

.leave-btn {
  background: #ff9800;
  color: white;
}

.create-team-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  border: 2rpx dashed #dee2e6;
}

.create-team-info {
  flex: 1;
}

.create-team-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.create-team-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.create-team-btn {
  background: #4CAF50;
  color: white;
  padding: 16rpx 32rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  margin-left: 20rpx;
}
</style>
